<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>TalkJS - Shard a Conversation</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <script>
      (function (t, a, l, k, j, s) {
        s = a.createElement("script");
        s.async = 1;
        s.src = "https://cdn.talkjs.com/talk.js";
        a.head.appendChild(s);
        k = t.Promise;
        t.Talk = {
          v: 3,
          ready: {
            then: function (f) {
              if (k)
                return new k(function (r, e) {
                  l.push([f, r, e]);
                });
              l.push([f]);
            },
            catch: function () {
              return k && new k();
            },
            c: l,
          },
        };
      })(window, document, []);
    </script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
      integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="index.js" defer></script>
    <div id="talkjs-container" style="width: 90%; margin: 30px; height: 500px">
      <i>Loading chat...</i>
    </div>
    <div
      class="modal fade"
      id="userEntryFormModal"
      tabindex="-1"
      data-bs-backdrop="static"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="userEntryFormModalLabel">
              Enter your info
            </h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <form onsubmit="modalSubmitted(event)">
            <div class="modal-body">
              <div class="mb-3">
                <label for="userName" class="form-label">Name</label>
                <input id="userName" type="text" class="form-control" />
              </div>
              <div class="mb-3">
                <label for="userEmailAddress" class="form-label"
                  >Email address</label
                >
                <input
                  id="userEmailAddress"
                  type="email"
                  class="form-control"
                />
              </div>
              <div class="mb-3">
                <label for="userProfilePicture" class="form-label"
                  >Profile Picture URL</label
                >
                <input
                  id="userProfilePicture"
                  type="text"
                  class="form-control"
                />
              </div>
              <button class="btn btn-primary" type="submit">Enter chat</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>
